<template>
	<view class="make" v-show="showWatermark">
		<view class="list" v-if="form.set == 1">
			<view class="item" v-for="i in 100" :style="itemStyle">
				<!-- 文字 -->
				<template v-if="form.type == 'text' || form.type == 'imgText'">
					<view style="display: flex;align-items: center;">
						<img class='icon-box' v-if="form.type == 'imgText'" :src="form.iconPath" alt="" srcset="">
						<view>
							<view class="font" v-if="form.fontName">{{form.fontName}} <template
									v-if="!form.namePhoneLine">
									{{form.fontPhone}}</template></view>
							<view class="font" v-if="form.fontPhone&&form.namePhoneLine">{{form.fontPhone}}</view>
							<view class="font" v-if="form.cuText">{{form.cuText}}</view>
						</view>
					</view>

				</template>
				<!-- 图片 -->
				<template v-if="form.type == 'img'">
					<img class='img-box' :src="form.imgPath" alt="" srcset="">
				</template>

			</view>
		</view>
	</view>
</template>
<script>
	/**
	 * 脱敏公用
	 * @param str 脱敏字符串
	 * @param begin 起始保留长度，从0开始
	 * @param end 结束保留长度，到str.length结束
	 * @returns {string}
	 */
	const desensitizedCommon = (str, begin, end) => {
		str = str.toString();
		if (!str && begin + end >= str.length) {
			return "";
		}
		let leftStr = str.substring(0, begin);
		let rightStr = str.substring(str.length - end, str.length);
		let strCon = "";
		for (let i = 0; i < str.length - end - begin; i++) {
			strCon += "*";
		}
		return leftStr + strCon + rightStr;
	};

	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		name: "watermark",
		props: {
			info: {
				type: String,
				default: '全局水印'
			}
		},
		data() {
			return {
				showWatermark: false,
				form: {
					set: 1, //1开 2关
					namePhoneLine: true, //姓名电话 换行
					type: 'text', //text img imgText 水印类型
					iconPath: 'https://icloud.e-189.com/dniqhr3498y348t34g39934hguoiehfsflasvnsklv/static/mine/img_bg.png',
					imgPath: 'https://icloud.e-189.com/dniqhr3498y348t34g39934hguoiehfsflasvnsklv/static/mine/img_bg.png', //图片路径
					fontSwitch: true, //文字开关
					density: 1, //密度 3低 2中 1高
					fontName: '',
					fontPhone: '',
					desensitizationName: true, //脱敏姓名
					desensitizationPhone: true, //脱敏号码
					desensitizationPhoneType: 0, //0 脱敏中间4位 1 显示最后4位
					cuText: '自定义文字', //自定义文字
					fontSize: 14, //字号
				}
			};
		},
		computed: {
			...mapState(['userInfo']),
			itemStyle() {

				let paddingW = 87;
				let paddingH = 52;
				if (this.form.density == 2) {
					paddingW = 108;
					paddingH = 84;
				} else if (this.form.density == 3) {
					paddingW = 135;
					paddingH = 148;
				}
				return `
					font-size:${this.form.fontSize}px;
					padding:${paddingW}rpx ${paddingH}rpx;
				`
			}
		},
		mounted() {
			this.form.fontName = this.userInfo.staffName;
			this.form.fontPhone = this.userInfo.phoneNumber;
			if (this.form.desensitizationName) {
				// 脱敏
				this.form.fontName = desensitizedCommon(this.form.fontName, 1, 1)
			}
			if (this.form.desensitizationPhone) {
				if (this.form.desensitizationPhoneType == 0) {
					this.form.fontPhone = desensitizedCommon(this.form.fontPhone, (this.form.fontPhone.length - 4) / 2,
						4)
				}
			}


			setTimeout(() => {
				this.showWatermark = true
			})
		},

	}
</script>
<style lang="scss" scoped>
	.make {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, 0);
		pointer-events: none;

		.list {
			width: 200%;
			height: 200%;
			position: absolute;
			top: -50%;
			left: -50%;
			transform: rotate(-45deg);
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			pointer-events: none;
			align-content: end;

			.item {
				// font-size: 28px;
				color: rgba(134, 144, 198, 0.3);
				// font-weight: bold;
				// padding: 30rpx;
				pointer-events: none;

				// margin-bottom: 10px;
				// background-color: yellow;
				.img-box {
					width: 280rpx;
					height: 80rpx;
					object-fit: cover;
					opacity: 0.3;
				}

				.icon-box {
					width: 100rpx;
					height: 100rpx;
					object-fit: cover;
					opacity: 0.3;
					margin-right: 16rpx;
				}
			}
		}
	}
</style>
